<template>
	<view class="pages">
		<!-- #ifndef H5 -->
		<statusBar></statusBar>
		<!-- #endif -->
		<!-- 搜索功能 -->
		<view class="uni-search-box">
			<uni-search-bar v-model="searchCode" @clear="resetGamelist()" @blur="searchByCode()" @input="searchByCode()" ref="searchBar" radius="100" cancelButton="none" disabled
				placeholder="按游戏编号和游戏状态搜索" />		
		</view>
		<view class=".uni-search-box search-time">
		  <uni-datetime-picker
		    type="date"
		    :clearIcon="false"
		    v-model="searchCode"
		  />
		</view>
		<!-- 列表渲染 -->
		<view class="gamelist">
			<uni-table stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center" width="10px">序号</uni-th>
					<uni-th align="center" width="30px">游戏编号</uni-th>
					<uni-th align="center" width="30px">游戏状态</uni-th>
					<uni-th align="center" width="40px">详情</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in filterGameList" :key="index">
					<uni-td align="center">{{index+1}}</uni-td>
					<uni-td align="center">{{item.gameCode}}</uni-td>
					<uni-td align="center">{{item.processStatus}}</uni-td>
					<uni-td align="center">
						<button type="primary" size="mini" @click="checkGameDetail(item.gameCode)" >详情</button>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view>
			<!-- 登录提示窗  实际使用中游客也可以查看，暂不做判断-->
			<uni-popup ref="loginTipsDialog" type="dialog">
				<uni-popup-dialog type="warn" title="登录提示" content="当前处于未登录状态,请登录后再查看游戏详情" @confirm="toLogin">
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {querygamelist} from "@/common/api"
	import {formatDate,GAME_ID,GAME_STATUS} from "@/common/utils"
	import {mapState,mapMutations,mapGetters,mapActions} from "@/store/helper/dm"
	import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
	export default {
		components: {
			statusBar
		},
		data() {
			return {
				gamelist: [
					// {
					// 	id: "1",						
					// 	gameCode: "2022-02-28_khgs",
					// 	createDatetime: "2022-01-22T18:26:22.279Z",
					// 	processStatus:"待开始"
					// },
					// {
					// 	id: "2",
					// 	gameCode: "2022-02-22_khgs",
					// 	createDatetime: "2022-01-23T18:26:22.279Z",
					// 	processStatus:"进行中"
					// },
					// {
					// 	id: "2",
					// 	gameCode: "2022-02-09_khgs",
					// 	createDatetime: "2022-01-24T18:26:22.279Z",
					// 	processStatus:"已结束"
					// },
					// {
					// 	id: "2",
					// 	gameCode: "2022-02-01_khgs",
					// 	createDatetime: "2022-02-18T18:26:22.279Z",
					// 	processStatus:"已结束"
					// },
					// {
					// 	id: "2",
					// 	gameCode: "2022-01-09_khgs",
					// 	createDatetime: "2022-02-18T18:26:22.279Z",
					// 	processStatus:"已结束"
					// }
				],
				searchCode: "",
				searchMode:"",
				queryDetailGameID:"",
			}
		},
		computed: {
			filterGameList() {
				//按时间范围搜索
				// if(this.searchMode==="time" ){
				// 	console.log(this.searchDate)
				// 	return this.gamelist.filter( ({createDatetime}) => this.searchDate.indexOf(`${createDatetime}`)>-1 )
				// }else{}
				//按游戏编号和进度搜索	
					return this.gamelist.filter( ({gameCode,processStatus}) =>
						`${gameCode}${processStatus}`.toLowerCase().includes(this.searchCode.toLowerCase()))
				
			},
			...mapState([
				"user",
				"gameList",
				"currentGameID"
			]),
			...mapGetters([
				"isLogin",
			]),
		},
		onLoad(){
			this.showGamelist()
			//每隔1分钟秒查询更新一次游戏列表
			// this.timer= setinterval(this.showGamelist(),60000)
		},
		methods: {
			async showGamelist(){
				const {data,code,message} = await querygamelist({"gameDate":this.searchDate})
				if(data.code==="200"){
					//处理数据保存为当前的游戏列表
					for (let i = 0; i < data.data.gameList.length; i++) {
						let gamelistItem={}
						gamelistItem.id=i+1
						gamelistItem.gameCode=data.data.gameList[i].code
						gamelistItem.createDatetime=data.data.gameList[i].date
						gamelistItem.processStatus=data.data.gameList[i].processStatus
						this.gamelist.unshift(gamelistItem)
					}
					//未登录态默认存储 当前列表第一项游戏编号 
					//玩家:登陆后即可在view页面开始游戏
					this.setCurrentGameID(this.gamelist[0].gameCode)
					this.setGameStatus(this.gamelist[0].processStatus)
					uni.setStorageSync('GAME_ID',this.gamelist[0].gameCode)
					uni.setStorageSync('GAME_STATUS',this.gamelist[0].processStatus)
				}else{
						console.log(data.message)
					}
			},
			resetGamelist(){
				this.showGamelist()
				this.searchCode= ""
			},
			searchByCode(){
				this.searchMode="" 
			},
			searchByTime() {
				this.searchMode="time" 
				this.filterGameList()
			},
			checkGameDetail(code){
				console.log(code)
				this.queryDetailGameID= code
				if(this.user.type==='dm'){
					uni.navigateTo({
						url:`/pages/view/player/process-game?queryGameCode=${this.queryDetailGameID}`
					})
				}else if(this.user.type==='player') {
					uni.navigateTo({
						url:`/pages/view/player/enter-game?queryGameCode=${this.queryDetailGameID}`
					})
				} else{
					this.$refs.loginTipsDialog.open()
				}
			},
			toLogin(){
				//无法正常跳转
				uni.navigateTo({
					url:"/pages/ucenter/ucenter"
				})
			},
			...mapMutations([
				"setCurrentGameID",
				"setGameStatus"
			])
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifndef APP-NVUE */
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	/* #endif */
	.pages {
		background-color: #FFFFFF;
	}

	.gamelist {
		width: 100%;
		height: 100%;
		
	}
	/deep/.uni-table-th,.uni-table-th{
		font-size:$uni-font-size-sm;
	}

	.uni-search-box {
		background-color: #FFFFFF;
		position: sticky;
		height: 90.57rpx;
		top: 0;
		left: 0;
		/* #ifndef APP-PLUS */
		z-index: 9;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		width: 580rpx;
		/* #endif */
	}

	.cover-search-bar {
		height: 90.57rpx;
		position: relative;
		top: -90.57rpx;
		margin-bottom: -90.57rpx;
		/* #ifndef APP-NVUE */
		z-index: 999;
		/* #endif */
	}
</style>
